Photo by Colton Duke on Unsplash

挖喔我寫完了！（灑花

從將大綱交給 GPT 產出後，陸續修改了幾次大綱。從一開始的游刃有餘（因為八月就開始備稿XD），到最後的火燒屁股當天產文（理想進度追不上實際進度）。

還有寫文途中，越寫越覺得不對勁（XD），訂定的大綱順序錯了，應該先講流程處理、再寫函式的介紹。但是文都發了，也只能硬著頭皮繼續寫下去，待最後再重新整理閱讀順序XD

還有讀 CSS FLEX 跟 GRID 暈頭轉向時，幸好有各位前輩的意見支援，不然我應該還在坑底出不來 XD

還有太貪心的想把覺得重要的部分都讀過並寫成文章，結果太濃縮了寫不完會死掉（XD）。於是在鐵人賽將結束的前幾天，又改了一次大綱XD……最後想寫的主題清單已經超過四十篇了XD（目前預計是鐵人 30 + 延伸 15）。

還有最初備文時遇到小孩開學升班級，結果隔壁班腸病毒停課，然後小孩成了班上壓垮駱駝的那根稻草——第二或第三個確診腸病毒，恭喜本班級達成停課標準 ˊ _>ˋ，但確診時又剛好卡兩個六日，所以硬生生地就變成放九天假 Q_Q（媽媽哀號：我的鐵人阿阿阿）

然後小孩就開心地在家宅了九天，九天後崩潰不想上學，媽媽要豹炸啦 ╰(〒皿〒)╯

咳嗯，前面的閒聊結束了，接下來來聊點正經的 ㆁωㆁ*

查找資源時，很感謝願意將所學或所知的知識分享在網路上的各位大大。只是有點小小感慨，由於主要的參考資料是 MDN，蠻多繁中的部分翻譯仍未完成，只好看簡中版。看了簡中後發現有些字句，可能因文化差異（？）、或者我理解能力差（XD）……最後只好乖乖看英文的XD

但看英文 MDN 時，發現 ABC 字母我都認識，句子一長就搞不清楚在講什麼，直接暈了 ˊ_>ˋ 然後也有遇過直譯不能理解，要問人或是請 GPT 說明才能大概懂想表達的意思；果然英文能力也是必備的呢，再努力。

然後因為想寫、想學、想做的事情還太多，加上前面 29 篇鐵人文只能算是初探，還有很多錯漏需要找時間補正，所以在鐵人賽第 30 天的時候先畫上句點，之後再慢慢把那些挖出來的坑填好填滿，喔耶。

感謝為我加油打氣、給我建議的各位、
感謝讀書會的好夥伴們、
感謝哥布林殺手的成員（蔓姊我愛你 > 3<）、
感謝老公隨時支援、
還有調皮搗蛋負責賣萌、每天被我吸爆然後唉唉叫的女兒（XD），
媽媽我完賽啦～～

學習路漫漫，雖然我現在還只是個還沒轉職成功的菜雞，希望以後哪天，我也能把我學到的東西分享給大家 ✪ω✪

然後，如果有哪位大大／公司願意收新手前端，你好我是一隻菜雞海獺，我會努力啄米，請多指教！（欸）

以下是重新整理過的目錄

• D1：HTML - 基礎
• D2：HTML - 結構
• D3：HTML - 語意化元素、區塊元素與行內元素
• D4：HTML - 常用元素
• D5：HTML - 補充：絕對路徑與相對路徑
• D6：CSS - 簡介
• D7：CSS - 選擇器們 - 基本、分組與組合
• D8：CSS - 選擇器們 - 偽類（pseudo-class）
• D9：CSS - 選擇器們 - 偽元素（pseudo-elements）
• 10：CSS - 佈局基本 - 佈局（layout）入門與盒模型（box-model）
• 11：CSS - 佈局基本 - position
• 12：CSS - 佈局基本 - display：block、inline、inline-block
• 13：JS - 基礎 - 基礎概念與 API 簡介
• 14：JS - 基礎 - 變數與宣告、TDZ
• 15：JS - 基礎 - 資料型別、運算子、陳述式與表達式定義
• 21：JS - 基礎 - 流程控制 - 條件判斷與例外處理
• 22：JS - 基礎 - 流程控制 - 循環（loop）與迭代（iteration）
• 17：JS - 基礎 - 陣列 - 1：陣列介紹與常見方法（push, unshift, foreach, pop, shift, splice）
• 18：JS - 基礎 - 陣列 - 2：常見方法（map, filter, reduce, concat, find, findindex）
• 16：JS - 基礎 - 函式 - 宣告與名詞定義
• 19：JS - 基礎 - 物件 - 1：宣告、取值與修改
• 20：JS - 基礎 - 物件 - 2：傳值（call by value）、傳參考（call by reference）與深淺拷貝（shallow copy、deep copy）
• 23：JS - 基礎 - 其他 - 字串處理方法 - 1：toString, toUpperCase, toLowerCase, split, join）
• 24：JS - 基礎 - 其他 - 字串處理方法 - 2：replace, substring, slice, indexOf
• 25：JS - 基礎 - 其他 - 常見方法：parseInt, parseFloat, new Date, setTimeout, setInterval
• 26：JS - 基礎 - DOM - 1 - DOM 與 BOM 概述、節點控制（querySelector, querySelectorAll, createElement, appendChild, childNodes, parentNodes）
• 27：JS - 基礎 - DOM - 2 - 節點控制（setAttribute, getAttribute, data-*, innerHTML, innerText, textContent）
• 28：JS - 基礎 - DOM - 3 - 瀏覽器事件（browser event）：addEventListener, event.target, event.target.value, event.target.style, event.target.files
• 29：JS - 基礎 - DOM - 4 - Cookie、Storage：document.cookie, Storage

最後別忘了看看哥布林殺手的團隊成員的不同主題唷，
^.< 鳩咪！

• Mandy：從零開始學習 Astro, 打造個人Blog (部落格)
• 雷 N：GPT 伴我讀一些文件
• GSON：用 GPT 撰寫選股策略
• Calvin：30 天準備 GCP Professional Cloud Architect
• 海綿：暢玩 WordPress 30 天 部署 X 開發 X 上線